<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>应用服务列表 - API文档管理系统</title>
    <link th:href="@{/css/bootstrap/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap/font/bootstrap-icons.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
            <div class="container-fluid">
                <a class="navbar-brand" th:href="@{/api-doc/}">
                    <i class="bi bi-book"></i>
                    API文档管理系统
                </a>
                <div class="navbar-nav ms-auto">
                    <a class="nav-link" th:href="@{/api-doc/}">
                        <i class="bi bi-house"></i>
                        首页
                    </a>
                    <a class="nav-link" th:href="@{/api-doc/list}">
                        <i class="bi bi-list"></i>
                        API列表
                    </a>
                    <a class="nav-link" th:href="@{/api-doc/app-service/list}">
                        <i class="bi bi-server"></i>
                        应用服务
                    </a>
                    <a class="nav-link" th:href="@{/api-doc/create}">
                        <i class="bi bi-plus-circle"></i>
                        新增API
                    </a>
                    <a class="nav-link" th:href="@{/swagger-ui/index.html}" target="_blank">
                        <i class="bi bi-code-square"></i>
                        Swagger UI
                    </a>
                </div>
            </div>
        </nav>

        <!-- 错误信息显示 -->
        <div th:if="${error}" class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle"></i>
            <span th:text="${error}"></span>
            <button type="button" class="btn-close" data-dismiss="alert"></button>
        </div>

        <!-- 应用服务列表 -->
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-server"></i>
                            应用服务列表
                        </h5>
                    </div>
                    <div class="col-md-6 text-end">
                        <a th:href="@{/api-doc/app-service/create}" class="btn btn-success">
                            <i class="bi bi-plus-circle"></i>
                            新增应用服务
                        </a>
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                <div th:if="${appServices == null or #lists.isEmpty(appServices)}" class="text-center p-5">
                    <i class="bi bi-server fs-1 text-muted"></i>
                    <p class="text-muted mt-2">暂无应用服务</p>
                    <a th:href="@{/api-doc/app-service/create}" class="btn btn-primary">
                        <i class="bi bi-plus-circle"></i>
                        创建第一个应用服务
                    </a>
                </div>
                
                <div th:if="${appServices != null and not #lists.isEmpty(appServices)}">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>ID</th>
                                    <th>服务名称</th>
                                    <th>IP地址</th>
                                    <th>端口</th>
                                    <th>协议</th>
                                    <th>状态</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="appService : ${appServices}">
                                    <td th:text="${appService.id}">1</td>
                                    <td>
                                        <a th:href="@{/api-doc/app-service/detail/{id}(id=${appService.id})}" th:text="${appService.name}">
                                            服务名称
                                        </a>
                                    </td>
                                    <td th:text="${appService.ipAddress}">127.0.0.1</td>
                                    <td th:text="${appService.port}">8080</td>
                                    <td th:text="${appService.protocol}">http</td>
                                    <td>
                                        <span th:if="${appService.enabled}" class="badge bg-success">启用</span>
                                        <span th:unless="${appService.enabled}" class="badge bg-secondary">禁用</span>
                                    </td>
                                    <td th:text="${#temporals.format(appService.createTime, 'yyyy-MM-dd HH:mm')}">2023-01-01 12:00</td>
                                    <td>
                                        <div class="btn-group btn-group-sm" role="group">
                                            <a th:href="@{/api-doc/app-service/detail/{id}(id=${appService.id})}" 
                                               class="btn btn-outline-primary" title="查看详情">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                            <a th:href="@{/api-doc/app-service/edit/{id}(id=${appService.id})}" 
                                               class="btn btn-outline-secondary" title="编辑">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <button type="button" class="btn btn-outline-danger" 
                                                    onclick="confirmDelete(/*[[${appService.id}]]*/)" title="删除">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 分页 -->
                    <div class="card-footer" th:if="${totalPages > 1}">
                        <nav aria-label="分页导航">
                            <ul class="pagination justify-content-center mb-0">
                                <li class="page-item" th:classappend="${currentPage == 1} ? 'disabled'">
                                    <a class="page-link" th:href="@{/api-doc/app-service/list(page=${currentPage - 1}, size=${pageSize})}" aria-label="上一页">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                
                                <li class="page-item" th:each="i : ${#numbers.sequence(1, totalPages)}" 
                                    th:classappend="${i == currentPage} ? 'active'">
                                    <a class="page-link" th:href="@{/api-doc/app-service/list(page=${i}, size=${pageSize})}" th:text="${i}">1</a>
                                </li>
                                
                                <li class="page-item" th:classappend="${currentPage == totalPages} ? 'disabled'">
                                    <a class="page-link" th:href="@{/api-doc/app-service/list(page=${currentPage + 1}, size=${pageSize})}" aria-label="下一页">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                        <div class="text-center mt-2 text-muted">
                            <small>共 <span th:text="${total}"></span> 条记录，第 <span th:text="${currentPage}"></span> 页，共 <span th:text="${totalPages}"></span> 页</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    确定要删除这个应用服务吗？此操作不可恢复。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script th:src="@{/js/bootstrap/bootstrap.bundle.min.js}"></script>
    <script>
        let deleteId = null;
        
        function confirmDelete(id) {
            deleteId = id;
            const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
            deleteModal.show();
        }
        
        document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
            if (deleteId) {
                // 发送删除请求
                fetch('/api-doc/app-service/delete/' + deleteId, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                .then(response => {
                    if (response.ok) {
                        // 重新加载页面
                        location.reload();
                    } else {
                        alert('删除失败');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('删除失败');
                });
            }
        });
    </script>
</body>
</html>